<template>
  <div class="container">

    <div class="drag-wrap">

      <!--列表1-->
      <draggable class="site-view-left-list-group"
                 element="div"
                 v-model="listLeft"
                 :options="dragOptions1"
                 @start="isDragging=true"
                 @end="isDragging=false">
        <div class="left-item" v-for="(item,key) in listLeft" :key="key+''" @click="add(item)">
          {{item.name}}
        </div>
      </draggable>
      <!--列表2-->
      <div class="site-view-right-wrap" :style="bg_img">
        <draggable class="right-list-group"
                   element="div"
                   v-model="listRight"
                   :options="dragOptions2"
                   :move="onMove"
                   @start="isDragging=true"
                   @end="isDragging=false">
          <div class="right-item" v-for="(item,key) in listRight"
               :key="key+''"
               @click="selected(key)">
            <template v-if="item.value===types.search">
              <QSearch
                :placeholder="listRight[key].data.placeholder"
                :sitename="listRight[key].data.sitename">
              </QSearch>
            </template>
            <template v-else-if="item.value===types.banner">
              <QBanner :list="listRight[key].data.list"></QBanner>
            </template>
            <template v-else-if="item.value===types.category">
              <QCategory :list="listRight[key].data.list"></QCategory>
            </template>
            <template v-else-if="item.value===types.subject">
              <QSubject :subject="listRight[key].data"></QSubject>
            </template>
            <div class="site-view-item-mask hide" :class="key===selectedIndex?'show':''"></div>
            <Icon class="site-view-item-del" @click.stop="delItem(key)" color="white" size="28" type="md-trash"/>
          </div>
        </draggable>
      </div>

    </div>
    <div class="op-wrap">
      <div class="op-content">
        <template v-if="selectedIndex>=0 && listRight[selectedIndex].value === types.search">
          <QSearchEdit :cdata="tempData"></QSearchEdit>
        </template>
        <template v-if="selectedIndex>=0 && listRight[selectedIndex].value === types.banner">
          <QBannerEdit :cdata="tempData"></QBannerEdit>
        </template>
        <template v-if="selectedIndex>=0 && listRight[selectedIndex].value === types.category">
          <QCategoryEdit :cdata="tempData"></QCategoryEdit>
        </template>
        <template v-if="selectedIndex>=0 && listRight[selectedIndex].value === types.subject">
          <QSubjectEdit :cdata="tempData"></QSubjectEdit>
        </template>

      </div>
      <div class="btn-container" :class="selectedIndex>=0?'show':''">
        <Button @click="cancle">取消</Button>
        <Button type="primary" :loading="loading" @click="ok">保存</Button>
      </div>
    </div>

  </div>
</template>

<script>
  import '@vant/touch-emulator';
  import draggable from 'vuedraggable'
  import QSearch from '../../components/site/search'
  import QSelectSubject from '../../components/select-subject'
  import QBanner from '../../components/site/banner'
  import QCategory from '../../components/site/category'
  import QSubject from '../../components/site/subject'
  import QBannerEdit from '../../components/site-edit/banner'
  import QSearchEdit from '../../components/site-edit/search'
  import QCategoryEdit from '../../components/site-edit/category'
  import QSubjectEdit from '../../components/site-edit/subject'
  import {getSiteView, saveSiteView} from '@/api/site-view'

  export default {
    name: 'site-view',
    components: {
      draggable,
      QSearch,
      QCategory,
      QBanner,
      QSubject,
      QSearchEdit,
      QBannerEdit,
      QCategoryEdit,
      QSubjectEdit,
      QSelectSubject
    },
    data() {
      return {
        loading: false,
        bg_img: 'background-image:url(' + this.GLOBAL.getUrl('asset/bg_iphone.png')+')',
        types: {
          search: 0,//搜索
          banner: 1,//轮播
          category: 2,//分类
          subject: 3,//专题
        },
        selectedIndex: -1,// 标识当前被选择的是哪一个
        isDragging: false,
        tempData: {},//用来临时传递数据给子组件
        listLeft: [
          {
            name: '搜索',
            value: 0,
            show: true,
            data: {
              sitename: '站点名',
              placeholder: '亲，想找点什么呐？'
            }
          },
          {
            name: '轮播',
            value: 1,
            show: true,
            data: {
              list: [],
              autoplay: 3000
            }
          },
          {
            name: '分类',
            value: 2,
            show: true,
            data: {
              list: []
            }
          },
          {
            name: '专题',
            value: 3,
            show: true,
            data: {
              type: this.GLOBAL.TYPE_LINK_SUBJECT, img: [], title: '', value: null
            }
          }
        ],
        listRight: []

      }
    },
    computed: {
      dragOptions1() {
        return {
          animation: 150,
          sort: false,
          group: {
            name: 'description',
            pull: 'clone',
            put: false
          },
          ghostClass: 'ghost'
        }
      },
      dragOptions2() {
        return {
          animation: 150,
          group: 'description'
        }
      }
    },
    created() {
      this.getData();
    },
    methods: {
      getData() {
        let vm = this;
        getSiteView().then(rep => {
          if (rep.data.data !== null) {
            vm.listRight = JSON.parse(rep.data.data.view_config);
          } else {
            vm.listRight = [];
          }
        })
      },
      save() {

        let vm = this;
        vm.loading = true;
        let params = {"jsondata": JSON.stringify(vm.listRight)};
        saveSiteView(params).then(rep => {
          vm.$Message.success('保存成功');
          vm.loading = false;
        }, error => {
          vm.loading = false;
        });
      },
      ok() {
        this.save();
      },
      cancle() {
        this.tempData = {};
        this.selectedIndex = -1;
      },
      add(item) {
        this.listRight.push(JSON.parse(JSON.stringify(item)));
      },
      selected(index) {
        this.selectedIndex = index;
        this.tempData = this.listRight[index].data;
      },
      //删除指定组件
      delItem(index) {
        if (this.selectedIndex === index) {
          this.selectedIndex = -1;
        }
        this.listRight.splice(index, 1);
      },
      onMove({relatedContext, draggedContext}) {
        const relatedElement = relatedContext.element;
        const draggedElement = draggedContext.element;
        return ((!relatedElement || !relatedElement.fixed) && !draggedElement.fixed)
      }
    }
  }
</script>

<style scoped lang="less">
  @import "site-view.css";
</style>
